<template>
    <div class="attendance-content">
          <search-box
            :paramArray="paramArray"
            :reset="false"
            @search="search"
            ref="searchBox"
            >
            选择项目：<i-select style="width:200px;margin-right: 10px;vertical-align:middle;"  v-model="prjName" filterable placeholder="可输入项目名称查询项目" @on-change="changePrj">
                <i-option v-for="(item, i) in allProject" :key="i" :value="item.prjNo">{{item.prjName}}</i-option>
            </i-select>
           <span style="vertical-align: middle;">选择班组：</span> <i-select name="" id="" v-model="teamNo" style="width:200px;margin-right: 10px;margin-top: 10px;vertical-align:middle;" filterable placeholder="可输入查询班组">
                <i-option  v-for="(item, i ) in bzList" :key="i" :value="item.teamNo">{{item.teamName ? item.teamName : item.teamNo}}</i-option>
            </i-select>
            <Button @click="uploadAttendance" type="primary" style="margin-top: 10px;">导出考勤</Button>
            </search-box>
        <table-box
            :tableObj="tableObj"
            @changePage="changePage"
            >
            </table-box>
            <Modal
            v-model="showBigImg"
            width="600px"
            @confirm="showBigImg = false"
            >
            <div class="big-img">
                <img :src='`${$baiseImg}${currentC.image}`'/>
            </div>
            </Modal>
    </div>
</template>
<script>
import {getDb} from '@/js/common'
import {getAttendanceList, exportKaoqing, getBzList, getBzListByProj, projectListAll} from '@/js/api'
export default {
    name: 'attendance',
    data () {
        return {
            currentC: {},
            showBigImg: false,
            paramArray: [
                {
                    key: 'input',
                    value: '',
                    label: '项目名称',
                    placeholder: '请输入项目名称',
                    width: '',
                    type: 'prjName'
                },
                {
                    key: 'startEndTime',
                    value: '',
                    label: '起止时间',
                    format: 'yyyy-MM-dd',
                    placeholder: '开始日期          -          结束日期',
                    width: '',
                    type: 'times'
                }
            ],
            tableObj: {
                pageObj: {
                    pageSize: 10,
                    total: 11,
                    page: 1
                },
                list: [],
                columns: [
                    {
                        key: 'attendanceRecordID',
                        title: '考勤ID'
                    },
                    {
                        key: 'orderNo',
                        title: '考勤单号'
                    },
                    {
                        key: 'prjNo',
                        title: '项目编号'
                    },
                    {
                        key: 'prjName',
                        title: '项目名称'
                    },
                    {
                        key: 'teamNo',
                        title: '班组编号'
                    },
                    {
                        key: 'address',
                        title: '打卡地址'
                    },
                    {
                        key: 'status',
                        title: '考勤状态',
                        render: (h, params) => {
                            // 1-正常 2-迟到 3-早退
                            let sName = ['', '正常', '迟到', '早退']
                            return ('div', [
                                h('span',{},sName[params.row.status])
                            ])
                        }
                    },
                    {
                        key: 'image',
                        title: '打卡图片',
                        render: (h, params) => {
                            return ('div', [
                                h('img', {
                                    attrs: {
                                         src: this.$baiseImg+ params.row.image
                                    },
                                    style: {
                                        width: '50px',
                                        cursor: 'pointer'
                                    },
                                    on: {
                                        click: () => {
                                            this.currentC = params.row
                                            this.showBigImg = true
                                            this.showImg = 0
                                        }
                                    }
                                })
                            ])
                        }
                    },
                    {
                        key: 'isRsync',
                        title: '是否异步',
                        render: (h, params) => {
                            let msg = params.row.isRsync == 0 ? '非异步' : '异步'
                            return ('div', [
                                h('span',{},msg)
                            ])
                        }
                    },
                    {
                        key: 'realName',
                        title: '真实姓名'
                    },
                    {
                        key: 'updatedAt',
                        title: '更新时间'
                    }
                ]
            },
            searchObj: {
                prjName: '',
                upDatedAtStart: '',
                upDatedAtEnd: ''
            },
            bzList: [
            ],
            teamNo: '',
            projName: '',
            allProject: []
        }
    },
    created () {
        this.searchObj.prjName = this.$route.query.prjName || ''
        if (this.$route.query.prjName) {
            let item = this.paramArray[0]
            item.value = this.$route.query.prjName
            this.$set(this.paramArray, 0, item)
        }
        this.getBzLists()
        this.getProjectList()
    },
    mounted () {
        this.getList()
    },
    methods: {
        changePrj (e) {
            let param = {}
            this.teamNo = ''
            param = {
                userName: getDb('userName'),
                token: getDb('token'),
                currentPage: 1,
                prjNo: e
            }
            getBzListByProj(param).then(r => {
                if (r.code == 200) {
                    this.bzList = r.data || []
                }
            })
        },
        getProjectList () {
            let param = {}
            param = {
                userName: getDb('userName'),
                token: getDb('token'),
                currentPage: 1,
            }
            if (this.projName) param.projName = this.projName
            projectListAll(param).then(r => {
                if (r.code == 200) {
                    this.allProject = r.data || []
                }
                
            })
        },
        getBzLists () {
            let param = {}
            param = {
                userName: getDb('userName'),
                token: getDb('token')
            }
            getBzList(param).then(r => {
                if (r.code == 200) {
                    this.bzList = r.data || []
                }
            })
        },
        getList () {
            let param = {}
            let userName = getDb('userName')
            let token = getDb('token')
            const {tableObj: {pageObj: {page}},searchObj: {prjName, upDatedAtStart,upDatedAtEnd } } = this
            param = {
                userName,
                token,
                currentPage: page
            }
            if (prjName) param.prjName = prjName
            if (upDatedAtStart) param.upDatedAtStart = upDatedAtStart
            if (upDatedAtEnd) param.upDatedAtEnd = upDatedAtEnd
            getAttendanceList(param).then(r => {
                if (r.code == 200) {
                    this.tableObj.pageObj.total = r.data && r.data.count || 0
                    this.tableObj.list = r.data && r.data.list || []
                }
            })
        },
        changePage (page) {
            this.tableObj.pageObj.page = page
            this.getList()
        },
        search (obj) {
            this.doSearchMsg(obj)
            const {tableObj: {pageObj}} = this
            pageObj.page = 1
            this.$set(this.tableObj,'pageObj', pageObj)
            this.getList()
        },
        doSearchMsg (obj) {
            const {times, prjName} = obj
            this.$set(this.searchObj,'prjName', prjName)
            if (times && times.length && times[0]) {
                this.$set(this.searchObj,'upDatedAtStart', this.$moment(times[0]).format('YYYY-MM-DD'))
                this.$set(this.searchObj,'upDatedAtEnd', this.$moment(times[1]).format('YYYY-MM-DD'))
            }
        },
        uploadAttendance () {
            this.doSearchMsg(this.$refs.searchBox.getMsg())
            const {teamNo,searchObj: { upDatedAtStart, upDatedAtEnd}} = this
            if (upDatedAtStart == '') {
                this.$Message.error('请输入导出数据的开始时间')
                return
            }
            if (upDatedAtEnd == '') {
                this.$Message.error('请输入导出的截止时间')
                return
            }
            if (teamNo == '') {
                this.$Message.error('请选择班组')
                return
            }
            let userName = getDb('userName')
            let token = getDb('token')
            exportKaoqing({
                userName,
                token,
                upDatedAtStart,
                upDatedAtEnd,
                teamNo
            }).then(() => {
            })
        }
    }
}
</script>
<style lang="less" scoped>
.attendance-content {
    background: #fff;
    overflow: hidden;
    padding: 20px;
}
/deep/.big-img {
    width: 100%;
    text-align:center;
    img {
        display: inline-block;
        max-width: 100%;
    }
}
</style>